<template>
	<div class="flap-card-wrapper" v-show="flapCardVisible">
		<div class="flap-card-bg" :class="{'animation': runFlapCardAnimation}" v-show="runFlapCardAnimation">
			<div class="flap-card" v-for="(item, index) in flapCardList" :key="index" :style="{zIndex: item.zIndex}">
				<!-- 圆形 -->
				<div class="flap-card-circle">
					<!-- 左半圆 -->
					<div class="flap-card-semi-circle flap-card-semi-circle-left" :style="semiCirclStyle(item, 'left')" ref="left"></div>
					<!-- 右半圆 -->
					<div class="flap-card-semi-circle flap-card-semi-circle-right" :style="semiCirclStyle(item, 'right')" ref="right"></div>
				</div>
			</div>
			<!-- 烟花组件 -->
			<div class="point-wrapper">
				<div class="point" :class="{'animation': runPointAnimation}" v-for="item in pointList" :key="item"></div>
			</div>
		</div>
		<div class="book-card" :class="{'animation': runBookCardAnimation}" v-show="runBookCardAnimation">
      <div class="book-card-wrapper">
        <div class="img-wrapper">
          <img class="img" :src="data ? data.cover : ''">
        </div>
        <div class="content-wrapper">
          <div class="content-title">{{data ? data.title : ''}}</div>
          <div class="content-author sub-title-medium">{{data ? data.author : ''}}</div>
          <div class="content-category">{{categoryText()}}</div>
        </div>
        <div class="read-btn" @click.stop="showBookDetail(data)">{{$t('home.readNow')}}</div>
      </div>
    </div>
		<div class="close-btn-wrapper" @click="close">
			<!-- 关闭按钮 -->
			<div class="icon-close"></div>
		</div>
	</div>
</template>

<script>
import { storeHomeMixin } from '../../utils/mixin'
import { flapCardList, categoryText } from '../../utils/store'

export default {
	mixins: [storeHomeMixin],
	props: {
		data: Object
	},
	data() {
		return {
			flapCardList,
			front: 0, // 正面
			back: 1, // 背面
			intervalTime: 25, // 转动间隔时间
			runFlapCardAnimation: false, // 控制出场动画的显示与隐藏
			pointList: null,
			runPointAnimation: false, // 控制烟花动画的显示与隐藏
			runBookCardAnimation: false // 控制推荐图书页的显示与隐藏
		}
	},
	watch: {
		flapCardVisible(v) {
			if (v) {
				this.runAnimation()
			}
		}
	},
	methods: {
		close() {
			this.stopAnimation()
			this.setFlapCardVisible(false)
		},
		semiCirclStyle(item, dir) {
			return {
				backgroundColor: `rgb(${item.r}, ${item.g}, ${item.b})`,
				backgroundSize: item.backgroundSize,
				backgroundImage: dir === 'left' ? item.imgLeft : item.imgRight
			}
		},
		rotate(index, type) {
			const item = this.flapCardList[index]
			let dom
			if (type === 'front') {
				dom = this.$refs.right[index]
			} else {
				dom = this.$refs.left[index]
			}
			dom.style.transform = `rotateY(${item.rotateDegree}deg)`
			dom.style.backgroundColor = `rgb(${item.r}, ${item._g}, ${item.b})`
		},
		flapCardRotate() {
			// 获取正面的图片
			const frontFlapCard = this.flapCardList[this.front]
			// 获取背面的图片
			const backFlapCard = this.flapCardList[this.back]
			frontFlapCard.rotateDegree += 10
			frontFlapCard._g -= 5
			backFlapCard.rotateDegree -= 10
			if (backFlapCard.rotateDegree < 90) {
				backFlapCard._g += 5
			}
			if (frontFlapCard.rotateDegree === 90 && backFlapCard.rotateDegree === 90) {
				backFlapCard.zIndex += 2
			}
			this.rotate(this.front, 'front')
			this.rotate(this.back, 'back')
			if (frontFlapCard.rotateDegree === 180 && backFlapCard.rotateDegree === 0) { // 第一张图片的右边转动到与左边重合
				this.next()
			}
		},
		next() { // 正面与背面图片还原
			const frontFlapCard = this.flapCardList[this.front]
			const backFlapCard = this.flapCardList[this.back]
			frontFlapCard.rotateDegree = 0
			backFlapCard.rotateDegree = 0
			frontFlapCard._g = frontFlapCard.g
			backFlapCard._g = backFlapCard.g
			this.rotate(this.front, 'front')
			this.rotate(this.back, 'back')
			// 正面与背面的指针指向下一张
			this.front++
			this.back++
			const len = this.flapCardList.length
			if (this.front >= len) { // 判断正面指针是否溢出
				this.front = 0
			}
			if (this.back >= len) { // 判断背面指针是否溢出
				this.back = 0
			}
			// 动态设置zIndex
			// 100 -> 96
			// 99 -> 100
			// 98 -> 99
			// 97 -> 98
			// 96 -> 97
			this.flapCardList.forEach((item, index) => {
				item.zIndex = 100 - ((index - this.front + len) % len)
			})
			this.prepare()
		},
		prepare() { // 让背面的半圆和右侧的半圆重合
			const backFlapCard = this.flapCardList[this.back]
			backFlapCard.rotateDegree = 180
			backFlapCard._g = backFlapCard._g - 5 * 9
			this.rotate(this.back, 'back')
		},
		reset() {
			this.front = 0
			this.back = 1
			this.flapCardList.forEach((item, index) => { // 所有图片归位
				item.zIndex = 100 - index
				item._g = item.g
				item.rotateDegree = 0
				this.rotate(index, 'front')
				this.rotate(index, 'back')
			})
			this.runBookCardAnimation = false
			this.runFlapCardAnimation = false
			this.runPointAnimation = false
		},
		startFlapCardAnimation() { // 图标的翻转动画
			this.prepare()
			this.task = setInterval(() => {
				this.flapCardRotate()
			}, this.intervalTime)
		},
		startPointAnimation() {
			this.runPointAnimation = true
			setTimeout(() => {
				this.runPointAnimation = false
			}, 750)
		},
		stopAnimation() { // 关闭组件后停止动画
			if (this.task) {
				clearInterval(this.task)
			}
			// 关闭定时器
			if (this.timeout) {
				clearTimeout(this.timeout)
			}
			if (this.timeout2) {
				clearTimeout(this.timeout2)
			}
			this.reset()
		},
		runAnimation() {
			this.runFlapCardAnimation = true
			this.timeout = setTimeout(() => {
				this.startFlapCardAnimation()
				this.startPointAnimation()
			}, 300)
			this.timeout2 = setTimeout(() => {
				// 模拟API请求后关闭动画
				this.stopAnimation()
				this.runBookCardAnimation = true
			}, 2500)
		},
		categoryText() {
			if (this.data) {
				return categoryText(this.data.category, this)
			} else {
				return ''
			}
		}
	},
	created() {
		this.pointList = []
		for (let i = 0; i < 180; i++) {
			this.pointList.push(`point${i}`)
		}
	}
}
</script>

<style lang="scss" rel="stylesheet/scss" scoped>
	@import "../../assets/styles/global.scss";
	@import "../../assets/styles/flapCard.scss";

	.flap-card-wrapper {
		z-index: 1000;
		width: 100%; 
		height: 100%;
		background: rgba(0, 0, 0, .6);
		@include center;
		@include absCenter;
		.flap-card-bg {
			position: relative;
			width: px2rem(64);
			height: px2rem(64);
			border-radius: px2rem(5);
			background: white;
			transform: scale(0);
			opacity: 0;
			&.animation {
				animation: flap-card-move .3s ease-in both;
			}
			@keyframes flap-card-move {
				// 初始状态
				0% {
					transform: scale(0);
					opacity: 0;
				}
				50% {
					transform: scale(1.2);
					opacity: 1;
				}
				75% {
					transform: scale(.9);
					opacity: 1;
				}
				100% {
					transform: scale(1);
					opacity: 1;
				}
			}
			.flap-card {
				width: px2rem(48);
				height: px2rem(48);
				@include absCenter;
				.flap-card-circle {
					display: flex;
					width: 100%;
					height: 100%;
					.flap-card-semi-circle {
						flex: 0 0 50%;
						width: 50%;
						height: 100%;
						background-repeat: no-repeat;
						backface-visibility: hidden;
					}
					.flap-card-semi-circle-left {
						border-radius: px2rem(24) 0 0 px2rem(24);
						background-position: center right;
						// 设置转动轴
						transform-origin: right;
					}
					.flap-card-semi-circle-right {
						border-radius: 0 px2rem(24) px2rem(24) 0;
						background-position: center left;
						transform-origin: left;
					}
				}
			}
			.point-wrapper {
				@include absCenter;
				.point {
					border-radius: 50%;
					@include absCenter;
					&.animation {
						@for $i from 1 to length($moves) {
							&:nth-child(#{$i}) {
								@include move($i)
							}
						}
					}
				}
			}
		}
		.book-card {
      position: relative;
      width: 65%;
      max-width: px2rem(400);
      box-sizing: border-box;
      border-radius: px2rem(15);
      background: white;
      &.animation {
        animation: scale .3s ease-in both;
        @keyframes scale {
          0% {
            transform: scale(0);
            opacity: 0;
          }
          100% {
            transform: scale(1);
            opacity: 1;
          }
        }
      }
      .book-card-wrapper {
        width: 100%;
        height: 100%;
        margin-bottom: px2rem(30);
        @include columnTop;
        .img-wrapper {
          width: 100%;
          margin-top: px2rem(20);
          @include center;
          .img {
            width: px2rem(90);
            height: px2rem(130);
          }
        }
        .content-wrapper {
          padding: 0 px2rem(20);
          margin-top: px2rem(20);
          .content-title {
            color: #333;
            font-weight: bold;
            font-size: px2rem(18);
            line-height: px2rem(20);
            max-height: px2rem(40);
            text-align: center;
            @include ellipsis2(2)
          }
          .content-author {
            margin-top: px2rem(10);
            text-align: center;
          }
          .content-category {
            color: #999;
            font-size: px2rem(14);
            margin-top: px2rem(10);
            text-align: center;
          }
        }
        .read-btn {
          position: absolute;
          bottom: 0;
          left: 0;
          z-index: 1100;
          width: 100%;
          border-radius: 0 0 px2rem(15) px2rem(15);
          padding: px2rem(15) 0;
          text-align: center;
          color: white;
          font-size: px2rem(14);
          background: $color-blue;
        }
      }
    }
		.close-btn-wrapper {
			position: absolute;
			left: 0; 
			bottom: px2rem(30);
			z-index: 1100;
			width: 100%;
			@include center;
			.icon-close {
				width: px2rem(45);
				height: px2rem(45);
				border-radius: 50%;
				background-color: #333;
				font-size: px2rem(25);
				color: white;
				@include center;
			}
		} 
	}
</style>
